<template>
  <el-drawer
    :visible="drawer"
    :show-close="false"
    @close="handleClose"
    size="35.5%"
    class="detailDrawer"
  >
    <div class="drawerWrapper">
      <div class="title">工单流</div>
      <div class="item">
        <div class="title_area">
          <div class="img" style="margin-right: 15px">
            <img src="@/assets/imgs/geren/stream1.png" />
          </div>
          <div class="tit">发起工单</div>
        </div>
        <div class="info_area">
          <ul>
            <li class="c-item">
              <div class="tit">创建时间</div>
              <div class="cont">
                {{ info.gmtCreated ? info.gmtCreated : "-" }}
              </div>
            </li>
            <li class="c-item">
              <div class="tit">云尘付流水号</div>
              <div class="cont">
                {{ info.innerPayformNo ? info.innerPayformNo : "-" }}
              </div>
            </li>
            <li class="c-item">
              <div class="tit">工单类型</div>
              <div class="cont">
                {{ info.orderTypeName ? info.orderTypeName : "-" }}
              </div>
            </li>
            <li class="c-item">
              <div class="tit">二级分类</div>
              <div class="cont">
                {{ info.orderTypeDetailName ? info.orderTypeDetailName : "-" }}
              </div>
            </li>
            <li class="c-item" v-for="(i, idx) in info.controlList" :key="idx">
              <div class="tit">
                {{ i.type == "upload" ? "文件名" : i.title }}
              </div>
              <div class="cont">
                {{ i.type == "upload" ? i.describe : i.value }}
              </div>
            </li>

            <li class="c-item">
              <div class="tit">工单状态</div>
              <div class="cont" :class="setColor(info.status)">
                {{ info.statusName ? info.statusName : "-" }}
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div v-if="!info.workOrderHandleList">
        <div class="item">
          <div class="title_area">
            <div class="img" style="margin-right: 15px">
              <img src="@/assets/imgs/geren/stream2.png" />
            </div>
            <div class="tit">接单处理</div>
          </div>
        </div>
        <div class="item">
          <div class="title_area">
            <div class="img" style="margin-right: 15px">
              <img src="@/assets/imgs/geren/stream3.png" />
            </div>
            <div class="tit">工单答复</div>
          </div>
        </div>
        <div class="item">
          <div class="title_area">
            <div class="img" style="margin-right: 15px">
              <img src="@/assets/imgs/geren/stream4.png" />
            </div>
            <div class="tit">完成确认</div>
          </div>
        </div>
      </div>
      <div v-for="(i, idx) in info.workOrderHandleList" :key="idx">
        <div class="item">
          <div class="title_area">
            <div class="img" style="margin-right: 15px">
              <img src="@/assets/imgs/geren/stream2.png" />
            </div>
            <div class="tit">接单处理</div>
          </div>
          <div class="info_area">
            <ul>
              <li class="c-item">
                <div class="tit">创建时间</div>
                <div class="cont">
                  {{ i.receiveCreated ? i.receiveCreated : "-" }}
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="item">
          <div class="title_area">
            <div class="img" style="margin-right: 15px">
              <img src="@/assets/imgs/geren/stream3.png" />
            </div>
            <div class="tit">工单答复</div>
          </div>
          <div class="info_area" v-if="i.replyCreated">
            <ul>
              <li class="c-item">
                <div class="tit">创建时间</div>
                <div class="cont">
                  {{ i.replyCreated ? i.replyCreated : "-" }}
                </div>
              </li>
              <li class="c-item">
                <div class="tit">内容</div>
                <div class="cont">
                  {{ i.replyContent ? i.replyContent : "-" }}
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="item">
          <div class="title_area">
            <div class="img" style="margin-right: 15px">
              <img src="@/assets/imgs/geren/stream4.png" />
            </div>
            <div class="tit">完成确认</div>
          </div>
          <div class="info_area">
            <ul>
              <li class="c-item" v-if="i.currentFinish == 1">
                <div class="tit">
                  {{
                    i.confirmFinish == 0
                      ? "重新激活"
                      : i.confirmFinish == 1
                      ? "完成时间"
                      : "-"
                  }}
                </div>
                <div class="cont">
                  {{ i.confirmCreated ? i.confirmCreated : "-" }}
                </div>
              </li>
              <li
                class="wait"
                v-if="i.currentFinish == 0 && info.status == 'pend_confirm'"
              >
                <div class="tit">答复是满意？满意请确认。</div>
                <div class="cont">
                  <el-button
                    @click="confirmFn(true, info.id)"
                    type="primary"
                    style="min-width: 120px"
                    >满意</el-button
                  >
                  <el-button @click="confirmFn(false, info.id)"
                    >不满意，重新激活</el-button
                  >
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: {
    drawer: {
      type: Boolean,
    },
    info: {
      type: Object,
      default: () => ({}),
    },
    activeKey: {
      type: String,
      default: "1",
    },
    width: {
      type: String,
      default: "140px",
    },
  },
  components: {},
  data() {
    return {
      resetKey: false,
      activeName: "1",
    };
  },
  methods: {
    setColor(status) {
      if (status == "processing" || status == "pend_process" || status == "pend_confirm") {
        return "pedding";
      } else {
        return "success";
      }
    },
    confirmFn(command, id) {
      let params = {
        id,
        confirm: command,
      };
      this.$http.post("/api/workOrderInfo/confirm", params).then((res) => {
        if (res.code === "0000") {
          command
            ? this.$message.success("确认成功！")
            : this.$message.success("激活成功！");

          this.handleClose();
          this.$emit("resetFields");
        }
      });
    },
    handleClose() {
      this.$emit("update:drawer", false);
      this.activeName = "1";
    },
    handleClick() {
      this.resetActivePosition(this.$refs.tabs.$el);
    },
    resetActivePosition($el) {
      this.$nextTick(() => {
        const activeEl = $el.querySelector(".el-tabs__item.is-active");
        const lineEl = $el.querySelector(".el-tabs__active-bar");
        const style = getComputedStyle(activeEl);
        const pl = style.paddingLeft.match(/\d+/)[0] * 1;
        const pr = style.paddingRight.match(/\d+/)[0] * 1;
        const w = style.width.match(/\d+/)[0] * 1;
        lineEl.style.transform =
          "translateX(" + (activeEl.offsetLeft + pl) + "px)";
        lineEl.style.width = w - pl - pr + "px";
      });
    },
    copyAppId(value) {
      const input = document.createElement("input"); // 创建input对象
      input.value = value; // 设置复制内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
      this.$message.success("复制成功！");
    },
  },
};
</script>

<style lang="scss" scoped>
.drawerWrapper {
  padding: 0 50px;

  .title {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1d1c1c;
    margin-bottom: 25px;
  }

  .item {
    margin-bottom: 25px;
    .title_area {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      .img {
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.15);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .tit {
        font-size: 18px;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #1d1c1c;
      }
    }
    .info_area {
      width: 100%;
      // height: 100px;
      padding-left: 55px;
      .c-item {
        display: flex;
        align-items: flex-start;
        margin: 20px 0;
        .tit {
          margin-right: 25px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #869daa;
          // line-height: 40px;

          max-width: 85px;
          min-width: 85px;
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
        }
        .cont {
          // display: inline-block;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1d1c1c;
          // width: 440px;
          // white-space: wrap;
          // line-height: 40px;
        }
      }
      .wait {
        .tit {
          min-width: 85px;
          margin-right: 25px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #869daa;
          line-height: 40px;
        }
        .cont {
          margin-top: 5px;
        }
      }
    }
  }
}

.pedding {
  color: #f69c1f !important;
}
.success {
  color: #07a555 !important;
}

:deep(.el-tabs__item) {
  width: 72px !important;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  margin-right: 40px;
}
:deep(.el-tabs__active-bar) {
  top: unset;
  bottom: 0;
  height: 1px;
}
</style>
